<template>
    <el-drawer v-model="drawerShow" :before-close="close" :with-header="false" size="35%">
    <div class="record-container">
      <div style="font-weight: 700;font-size: 15px;display: flex;align-items: center;">
          <span style="width:3px;height:14px;background-color: #2158F3;margin-right: 5px;"> &nbsp</span>
          <span>通知消息</span> 
      </div>
       <div style="display: flex;justify-content: flex-end;">
          <el-button type="primary" @click="listTap" size="small" plain round>跳转列表</el-button>
        </div>
        <div class="main-cen">
          <div class="title">{{form.msgTitle}}</div>
          <div class="time">{{formatDate(form.createTime)}}</div>
          <div class="centen" v-html="form.msgContent"></div>
        </div>
       
    </div>
  </el-drawer>
</template>
<script setup lang="ts">
import { onActivated, ref,nextTick } from 'vue'
import { getDetailsById ,setRead} from '@/api/sysMessag/index'
import { formatDate } from '@/utils'
import { useRouter } from 'vue-router'
import usePermissionStore from '@/store/modules/permission'
const permissionStore = usePermissionStore()
const routList=ref(permissionStore.routesAll)
const openBox = (info) => {
    drawerShow.value=true
    getRoleDetail(info)
  getsetRead(info)
}
const tabsList=ref([
  {
    label:'全部',
    value:''
  },{
    label:'系统',
    value:5
  },{
    label:'集装箱公司',
    value:10
  },{
    label:'货代',
    value:15
  },{
    label:'箱贸易',
    value:20
  },{
    label:'车队',
    value:25
  }

])

const drawerShow=ref(false)
const form=ref({})
//详情查询
const getRoleDetail=(id)=>{
  getDetailsById(id).then(res => {
    form.value=res.data
  })
}
const emits = defineEmits(['updateMode','listMode'])

const close=()=>{
    emits('updateMode');
  drawerShow.value=false
}
const closeOne=()=>{
    emits('listMode');
  drawerShow.value=false
}
//状态已读
const getsetRead=(id)=>{
  let ids=[]
  ids.push(id)
  setRead(ids).then(res => {
  })
}
//跳转
const router = useRouter();

const listTap=()=>{
  let companyRole=localStorage.getItem('companyRole')
  let tagName=localStorage.getItem('tagName')
  let val=''
  if(companyRole=='zx'){
    if(form.value.businessType==5){
      val='zx-rent'
    }else if(form.value.businessType==10){
      val='zx-buyBox'
    }else if(form.value.businessType==15){
      val='carServer'
    }else if(form.value.businessType==20){
      val='yardServer'
    }
  }else if(companyRole=='putBox'){
    if(form.value.businessType==5){
      val='putBox-rent'
    }else if(form.value.businessType==10){
      val='putBox-buyBox'
    }else if(form.value.businessType==15){
      val='carServer'
    }else if(form.value.businessType==20){
      val='yardServer'
    }
  }
  //判断是否需要切换左侧菜单
   if(tagName!=val){
    changeSidbar(val)
   }
   let jumpType=form.value.jumpType
   let msgType=form.value.msgType

   if(jumpType==10){  //货代租箱订单管理
       router.push({
        path: '/orderManageHD/rentOrder',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==20){//货代租箱提箱单
     router.push({
        path: '/tiXiangManageHD/tiXiangManageHD',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==30){//货代租箱提箱记录
     router.push({
        path: '/tiXiangManageHD/tiXiangManageHD/releaseInfo',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==40){//货代租箱还箱单
     router.push({
        path: '/tiXiangManageHD/huanXiangManageHD',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==50){//货代租箱还箱记录
     router.push({
        path: '/tiXiangManageHD/huanXiangManageHD/releaseInfo',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==60 && msgType==15){//货代集装箱贸易购买订单管理
     router.push({
        path: '/hdzxgm/agentBuyOrder',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==70 && msgType==15){//货代集装箱贸易购买提箱单
     router.push({
        path: '/hdzxgm/tiXiangManageBuyBox/GMtiXiangManageBuyBox',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==80 && msgType==15){//货代集装箱贸易购买提箱记录
     router.push({
        path: '/hdzxgm/tiXiangManageBuyBox/GMtiXiangManageBuyBoxInfo',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==90){//代代租箱记录
     router.push({
        path: '/boxRentAgent/myRentBox',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==5){  //集装箱公司租箱订单管理
       router.push({
        path: '/orderManage/rentOrder',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==15){//集装箱公司租箱提箱单
     router.push({
        path: '/tiXiangManage/tiXiangManageXD',
        query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==25){//集装箱公司租箱提箱记录
     router.push({
        path: '/tiXiangManage/tiXiangManage/releaseInfoXD',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==35){//集装箱公司租箱还箱单
     router.push({
        path: '/tiXiangManage/huanXiangManageXD',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==45){//集装箱公司租箱还箱记录
     router.push({
        path: '/tiXiangManage/huanXiangManage/releaseInfoXD',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==60 && msgType==10){//集装箱公司集装箱贸易购买订单管理
     router.push({
        path: '/xdzxgm/agentBuyOrder',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==70 && msgType==10){//集装箱公司集装箱贸易购买提箱单
     router.push({
        path: '/xdzxgm/tiXiangManageBuyBox/GMtiXiangManageBuyBox',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==80 && msgType==10){//集装箱公司集装箱贸易购买提箱记录
     router.push({
        path: '/xdzxgm/tiXiangManageBuyBox/GMtiXiangManageBuyBoxInfo',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==55){//集装箱公司集装箱贸易出售订单管理
     router.push({
        path: '/xdzxcs/sellOrder',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==65){//集装箱公司集装箱贸易出售提箱单
     router.push({
        path: '/xdzxcs/tiXiangManageSellBox/tiXiangManageSellBox',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==75){//集装箱公司集装箱贸易出售提箱记录
     router.push({
        path: '/xdzxcs/tiXiangManageSellBox/CStiXiangManageSellBoxInfo',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }else if(jumpType==85){//集装箱公司集装箱管理
     router.push({
        path: '/boxManageMyBox/myBox',
         query:{
          refNo:form.value.refNo,
          refId:form.value.refId,
        }
      })
   }

  
    closeOne()
}
import orderInfo from '@/store/modules/order'
function changeSidbar(tagName) {
  localStorage.setItem('tagName', tagName)
  orderInfo().setTagName(tagName)
  let companyRole = localStorage.getItem('companyRole') || routList.value[0].companyRole
     routList.value.forEach(item => {
        if(item.companyRole==companyRole){
          item.children.forEach(intemInfo=>{
            if(intemInfo.companyRole==tagName){
                  permissionStore.setSidebarRouters(intemInfo.children);
            }
          })
        }
      
    });
}
defineExpose({
    openBox
})
</script>
<style lang="scss" scoped>
.centen{
  margin-top: 20px;
}
.time{
  text-align: center;
   color: #666;
  margin-top: 5px;
  font-size: 14px;
}
.title{
  text-align: center;
  margin: 10px;
}
</style>
